'use client';

import React, { forwardRef } from 'react';
import { motion } from 'framer-motion';
import { cn } from '@/utils';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  icon?: React.ReactNode;
  iconPosition?: 'left' | 'right';
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>((
  {
    className,
    variant = 'primary',
    size = 'md',
    loading = false,
    icon,
    iconPosition = 'left',
    children,
    disabled,
    ...props
  },
  ref
) => {
  const baseClasses = cn(
    // 基础样式
    'inline-flex items-center justify-center rounded-xl font-medium transition-all duration-200',
    'focus:outline-none focus:ring-2 focus:ring-offset-2',
    'disabled:opacity-50 disabled:cursor-not-allowed',
    'relative overflow-hidden',
    
    // 尺寸样式
    {
      'px-3 py-1.5 text-sm h-8': size === 'sm',
      'px-4 py-2 text-sm h-10': size === 'md',
      'px-6 py-3 text-base h-12': size === 'lg',
    },
    
    // 变体样式
    {
      // Primary
      'bg-blue-500 hover:bg-blue-600 text-white shadow-sm focus:ring-blue-500':
        variant === 'primary',
      
      // Secondary
      'bg-gray-100 hover:bg-gray-200 text-gray-900 shadow-sm focus:ring-gray-500':
        variant === 'secondary',
      
      // Outline
      'border border-gray-300 hover:bg-gray-50 text-gray-700 bg-white shadow-sm focus:ring-gray-500':
        variant === 'outline',
      
      // Ghost
      'hover:bg-gray-100 text-gray-700 focus:ring-gray-500':
        variant === 'ghost',
      
      // Danger
      'bg-red-500 hover:bg-red-600 text-white shadow-sm focus:ring-red-500':
        variant === 'danger',
    },
    
    className
  );

  const iconElement = loading ? (
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
      className="w-4 h-4"
    >
      <svg
        className="w-full h-full"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
        />
      </svg>
    </motion.div>
  ) : icon;

  return (
    <motion.button
      ref={ref}
      className={baseClasses}
      disabled={disabled || loading}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: 'spring', stiffness: 400, damping: 25 }}
      {...props}
    >
      {/* 背景动画效果 */}
      <motion.div
        className="absolute inset-0 bg-white/20 rounded-xl"
        initial={{ scale: 0, opacity: 0 }}
        whileHover={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.2 }}
      />
      
      {/* 内容 */}
      <div className="relative flex items-center gap-2">
        {iconElement && iconPosition === 'left' && iconElement}
        {children}
        {iconElement && iconPosition === 'right' && iconElement}
      </div>
    </motion.button>
  );
});

Button.displayName = 'Button';

export default Button;